﻿@model NccPage

@{
    Layout = Constants.AdminLayoutName;
    //var controllerName = "CmsPage";
    Title = "Page Create";
    SubTitle = "Create a new page";

    if (Model.Id > 0)
    {
        Title = "Page Edit";
        SubTitle = "Update information of a page";
    }
}
<style>
    .tabBorderDesign {
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
    }
</style>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                @SubTitle
                <div class="pull-right">
                    @if (Model.Id > 0)
                    {
                        if (GlobalContext.WebSite.IsMultiLangual == true || Model.PageDetails.Where(x => x.Language == GlobalContext.WebSite.Language).Count() <= 0)
                        {
                            for (var j = 0; j < Model.PageDetails.Count; j++)
                            {
                                <a href="/@Model.PageDetails[j].Language/@Model.PageDetails[j].Slug" class="btn btn-sm btn-info btn-outline btn-xs" target="_blank"><i class="fa fa-eye"> </i> @Model.PageDetails[j].Language</a>
                            }
                        }
                        else
                        {
                            <a href="/@Model.PageDetails.Where(x => x.Language == GlobalContext.WebSite.Language).FirstOrDefault().Slug" class="btn btn-sm btn-info btn-outline btn-xs" target="_blank"><i class="fa fa-eye"> </i> @GlobalContext.WebSite.Language</a>
                        }
                        <a asp-controller="@ControllerName" asp-action="CreateEdit" asp-route-id="" class="btn btn-outline btn-success btn-xs">New Page</a>
                    }
                    <a asp-controller="@ControllerName" asp-action="Manage" class="btn btn-outline btn-primary btn-xs">Manage Page</a>
                </div> 
            </div>
            <div class="panel-body">
                <div class="row">
                    <form id="pageCreateEditForm" class="form-horizontal" asp-controller="@ControllerName" asp-action="CreateEdit" method="post">
                        <div class="col-sm-8 pull-left">
                            <span asp-validation-summary="ValidationSummary.All" class="text-danger"></span>
                            <input type="hidden" asp-for="Id" />
                            <div class="">
                                @{ 
                                    var tabBorderDesign = "";
                                }
                                @if (GlobalContext.WebSite.IsMultiLangual == true)
                                {
                                    <ul class="nav nav-tabs" role="tablist">
                                        @foreach (var item in Model.PageDetails)
                                        {
                                            if (GlobalContext.WebSite.Language == item.Language)
                                            {
                                                <li role="presentation" class="active">
                                                    <a href="#@item.Language" aria-controls="@item.Language" role="tab" data-toggle="tab">(D) 
                                                        @SupportedCultures.Cultures.Where(x => x.TwoLetterISOLanguageName == item.Language).FirstOrDefault().NativeName
                                                    </a>
                                                </li>
                                            }
                                            else
                                            {
                                                <li role="presentation" class="">
                                                    <a href="#@item.Language" aria-controls="@item.Language" role="tab" data-toggle="tab">
                                                        @if (SupportedCultures.Cultures.Where(x => x.TwoLetterISOLanguageName == item.Language).Count() > 0)
                                                        {
                                                            <span>@SupportedCultures.Cultures.Where(x => x.TwoLetterISOLanguageName == item.Language).FirstOrDefault().NativeName</span>
                                                        }
                                                        else
                                                        {
                                                            <span>@item.Language</span>
                                                        }
                                                    </a>
                                                </li>
                                            }
                                        }
                                    </ul>
                                    tabBorderDesign = "tabBorderDesign";
                                }
                                <!-- Tab panes -->
                                <div class="tab-content @tabBorderDesign" >
                                    @{ var activeClass = ""; var i = 0;}
                                    @foreach (var item in Model.PageDetails)
                                    {
                                        if (GlobalContext.WebSite.Language == item.Language)
                                        { activeClass = "active"; }
                                        else { activeClass = ""; }
                                        <div role="tabpanel" class="tab-pane row @activeClass" id="@item.Language">
                                            <div class="" style="padding:10px 25px 25px 25px;">
                                                <div class="col-md-12">
                                                    <input type="hidden" asp-for="PageDetails[i].Id" />
                                                    <input type="hidden" asp-for="PageDetails[i].Language" />
                                                    <div class="form-group input-group">
                                                        <span class="input-group-addon">Page Title: </span>
                                                        <input type="text" class="form-control pageTitle" asp-for="PageDetails[i].Title" placeholder="Enter Page Title in @item.Language">
                                                        <span asp-validation-for="PageDetails[i].Title" class="text-danger"></span>
                                                    </div>
                                                    <div class="form-group input-group">
                                                        <span class="input-group-addon">@ViewBag.DomainName</span>
                                                        <input type="text" class="form-control pageSlug" asp-for="PageDetails[i].Slug" placeholder="Slug in @item.Language">
                                                        <span asp-validation-for="PageDetails[i].Slug" class="text-danger"></span>
                                                    </div>
                                                </div>
                                                <div class="">
                                                    <label>Page Content</label>
                                                    @*<textarea id="PageContent" name="PageContent" class="form-control ckeditor" data-val="false">@Model.PageDetails[i].Content</textarea>*@
                                                    <textarea class="form-control pageContent" asp-for="PageDetails[i].Content"></textarea>
                                                    <span asp-validation-for="PageDetails[i].Content" class="text-danger"></span>
                                                </div>
                                                <div class="">
                                                    <label>Meta Description</label>
                                                    <textarea class="form-control" asp-for="PageDetails[i].MetaDescription" placeholder="Meta description in @item.Language"></textarea>
                                                </div>
                                                <div class="">
                                                    <label>Meta Keyword</label>
                                                    <textarea class="form-control" asp-for="PageDetails[i].MetaKeyword" placeholder="Meta keyword in @item.Language"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                        i++;
                                    }
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-4 pull-right">
                            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingOne">
                                        <div class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                <i class="more-less glyphicon glyphicon-chevron-down"></i>
                                                Publish
                                            </a>
                                        </div>
                                    </div>
                                    <div id="collapseOne" class="panel-collapse" role="tabpanel" aria-labelledby="headingOne">
                                        <div class="panel-body">
                                            <div class="from-group">
                                                <label class="control-label col-sm-4">Status</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control" asp-for="PageStatus" id="PageStatus" asp-items="@ViewBag.PageStatus"></select>
                                                </div>
                                            </div>                                            
                                            <div class="from-group">
                                                <label class="control-label col-sm-4">Visibility</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control" asp-for="PageType" asp-items="@ViewBag.PageType"></select>
                                                </div>
                                            </div>
                                            <div class="from-group">
                                                <label class="control-label col-sm-4">Schedule Date</label>
                                                <div class="col-sm-8">
                                                    <div class='input-group date datetimepicker'>
                                                        <input type="text" class="form-control" asp-for="PublishDate" value="@Model.PublishDate.ToString("MMM dd, yyyy hh:mm tt")" />
                                                        <span class="input-group-addon">
                                                            <span class="glyphicon glyphicon-calendar"></span>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="from-group">
                                                <label class="control-label col-sm-4">Layout</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control" asp-for="Layout" asp-items="@ViewBag.Layouts"></select>
                                                </div>
                                            </div>
                                            @*<div>
                                                <label>Add to Navigation Menu</label>
                                                <input type="checkbox" asp-for="AddToNavigationMenu" />
                                            </div>*@
                                        </div>
                                        <div class="panel-footer">
                                            <input type="hidden" name="SubmitType" id="SubmitType" value="Save" />
                                            <div class="pull-left">
                                                <button id="save" class="btn btn-sm btn-primary" type="button">
                                                    @if (Model.Id > 0)
                                                    {
                                                        <span>Update</span>                                                    
                                                    }
                                                    else
                                                    {
                                                        <span>Save</span>                                                    
                                                    }
                                                </button>
                                            </div>
                                            <div class="pull-right">
                                                @if (Model.Id == 0 || (int)Model.PageStatus != 2)
                                                {
                                                    <button id="publish" class="btn btn-sm btn-success" type="button">Publish</button>
                                                }                                                
                                            </div>
                                            <div style="clear:both;"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="headingTwo">
                                        <div class="panel-title">
                                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                                <i class="more-less glyphicon glyphicon-chevron-down"></i>
                                                Atributs
                                            </a>
                                        </div>
                                    </div>
                                    <div id="collapseTwo" class="panel-collapse " role="tabpanel" aria-labelledby="headingTwo">
                                        <div class="panel-body">
                                            <div class="from-group">
                                                <label class="control-label col-sm-4">Parent Page:</label>
                                                <div class="col-sm-8">
                                                    <select class="form-control" asp-for="Parent" name="ParentId" asp-items="@ViewBag.AllPages">
                                                        <option value="0">Select Parent</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="from-group">
                                                <label class="control-label col-sm-4">Order</label>
                                                <div class="col-sm-8">
                                                    <input type="tel" class="form-control" asp-for="PageOrder" value="0" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>
                <!-- /.row (nested) -->
            </div>
            <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
    </div>
</div>
@section Scripts{
    <script>
        KEDITOR_BASEPATH = "@Url.Content("~/lib/ckeditor/")";
    </script>
    <script src="~/lib/ckeditor/ckeditor.js"></script>
    <script>
        $(document).ready(function () {

            var elements = document.getElementsByClassName('pageContent');
            for (var i = 0; i < elements.length; ++i) {
                console.log(elements[i].name);
                CKEDITOR.replace(elements[i].name, {
                    enterMode: CKEDITOR.ENTER_DIV,
                    allowedContent: true,
                    filebrowserBrowseUrl: '/MediaHome/?isFile=true&inputId=ckeditor',
                    filebrowserImageBrowseUrl: '/MediaHome/?inputId=ckeditor',
                    //filebrowserUploadUrl: '/media/files',
                    //filebrowserImageUploadUrl: '/MediaHome/Upload',
                    //filebrowserWindowWidth: 800,
                    //filebrowserWindowHeight: 500,
                    toolbar: [
                        { name: 'document', items: ['Source', '-', /*'Save', 'NewPage', 'DocProps', 'Preview', 'Print', '-', 'Templates'*/] },
                        { name: 'clipboard', items: ['Cut', 'Copy', 'Paste'] },
                        { name: 'clipboard1', items: ['PasteText', 'PasteFromWord'] },
                        { name: 'clipboard2', items: ['Undo', 'Redo'] },
                        { name: 'editing', items: ['Find', 'Replace', 'SelectAll'] },
                        { name: 'editing1', items: ['SpellChecker', 'Scayt'] },
                        { name: 'styles', items: ['Styles'] },
                        { name: 'styles1', items: ['Format'] },
                        { name: 'styles2', items: ['Font'] },
                        { name: 'styles3', items: ['FontSize'] },
                        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
                        { name: 'basicstyles1', items: ['Strike', 'Subscript', 'Superscript'] },
                        //{ name: 'basicstyles2', items: ['-', 'RemoveFormat'] },
                        { name: 'paragraph', items: ['NumberedList', 'BulletedList'] },
                        { name: 'paragraph1', items: ['Outdent', 'Indent'] },
                        { name: 'paragraph2', items: ['Blockquote', 'CreateDiv'] },
                        { name: 'paragraph3', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
                        //{ name: 'paragraph4', items: ['-', 'BidiLtr', 'BidiRtl'] },
                        { name: 'links', items: ['Link', 'Unlink', 'Anchor'] },
                        { name: 'insert', items: ['Image', 'Mathjax', /*'Flash',*/ 'Table'] },
                        //'/',
                        { name: 'colors', items: ['TextColor', 'BGColor'] },
                        { name: 'insert1', items: ['HorizontalRule', 'Smiley'] },
                        { name: 'insert2', items: ['SpecialChar', 'PageBreak'] },
                        { name: 'tools', items: ['Maximize', 'ShowBlocks'] }
                    ],
                    extraPlugins: 'mathjax',
                    mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
                });
            }

            $(".pageTitle").change(function () {
                $(this).parent().parent().find(".pageSlug").val(NccUtil.GetSafeSlug($(this).val()));
                //$(".pageSlug").val(NccUtil.GetSafeSlug($(this).val()));
            });

            $("#publish").click(function () {
                var element = document.getElementById('PageStatus');
                element.value = "2";
                //console.log($("#Slug").val());
                //if ($("#Slug").val() == "") {
                //    document.getElementById("Slug").value = NccUtil.GetSafeSlug($("#Title").val());
                //    console.log($("#Slug").val());
                //}
                document.getElementById("SubmitType").value = "publish";
                //$("#SubmitType").value = "publish";

                //$('#PageContent').html(CKEDITOR.instances["PageContent"].getData());
                document.getElementById("pageCreateEditForm").submit();
            });

            $("#save").click(function () {
                //if ($("#Slug").val() == "") {
                //    $("#Slug").val(NccUtil.GetSafeSlug($(this).val()));
                //}
                $("#SubmitType").val("Save");

                //$('#PageContent').html(CKEDITOR.instances["PageContent"].getData());
                document.getElementById("pageCreateEditForm").submit();
            });
        });
    </script>
}
